<template>
  <view :style="[styles]" class="content">
    <text class="title" :style="{color:attribute.titleColor}">{{attribute.title}}</text>
    <span class="red-dot" v-if="attribute.required">*</span>
    <view class="radio-group">
      <u-radio-group :activeColor="attribute.radioGroupProps.activeColor"
        :placement="attribute.radioGroupProps.placement" v-model="attribute.value">
        <view class="radio-item" v-for="item in attribute.options" :key="item.name">
          <u-radio :label="item.label" :name="item.name"  />
        </view>
      </u-radio-group>
    </view>
    <view class="input-rule-text" v-if="requiredFail">{{attribute.requiredText}}</view>
  </view>
</template>

<script>
import { COMPREIFX } from "../../../libs/const/widget";

export default {
  name: `${COMPREIFX}cus-radio`,
  props: {
    attribute: Object,
    styles: Object,
  },
  data() {
    return {
      requiredFail: false
    }
  },
  methods: {
    validate() {
      return new Promise((resolve, reject) => {
        if (this.attribute.required) {
          this.requiredFail = !this.attribute.value
          resolve(this.requiredFail ? this.attribute.requiredText : undefined)
          return false;
        }
        resolve()
      })

    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  padding: 15rpx 20rpx;
}

.title {
  color: #333;
  font-size: 28rpx;
}

.red-dot {
  color: rgb(245, 39, 39);
  margin-left: 5rpx;
}

.radio-group {
  margin-top: 30rpx;
}

.radio-item {
  margin-bottom: 26rpx;

  &:nth-last-child(1) {
    margin-bottom: 0;
  }
}

.input-rule-text {
  color: #F05357;
  font-size: 24rpx;
  padding: 15rpx 18rpx;
}
</style>
